<template>
    <el-form ref="form" label-width="80px" style="padding:20px" size="mini" label-position="left">
        <el-form-item label="登录姓名">
            <el-input v-model="username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
            <el-input v-model="name" placeholder="用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="用户电话">
            <el-input v-model="phone" placeholder="用户电话"></el-input>
        </el-form-item>
        <el-form-item label="头像">
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeImg">
                <img v-if="headimg" :src="headimg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="签名">
            <el-input type="textarea" :rows="2" placeholder="请填写管理员描述信息！" v-model="remarks"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button @click="close">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import C from '@/common/common.js'
import * as qiniu from 'qiniu-js'

export default {
  name: 'addAdmin',
  data () {
    return {
      id: 0,
      name: '',
      phone: '',
      username: '',
      headimg: '',
      remarks: '',
      file: {}
    }
  },
  methods: {
    async submit () {
      if (!(/^[\u4e00-\u9fa5]{2,4}$/.test(this.name))) {
        C.error('用户名为2到4个汉字')
        return false
      } else if (!(/^1[345678]\d{9}$/.test(this.phone))) {
        C.error('手机号不正确')
        return false
      }
      let that = this

      // 如果图片有变动开始上传图片
      if (this.file.name) {
        // 开始获取上传的token
        let token = await C.ajax('/login/public/gettoken')
        let keyName = new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate() + '/' + this.file.name
        let observable = qiniu.upload(this.file.raw, keyName, token.uptoken)
        observable.subscribe({
          next (res) {
            // console.log(res)
          },
          error (err) {
            if (err) {
              C.error('上传失败！')
            }
            // C.error('上传失败！')
          },
          complete (res) {
            // console.log(res)
            // 上传成功后开始提交表格
            let data = {
              id: that.id,
              name: that.name,
              phone: that.phone,
              username: that.username,
              headimg: 'http://pde4eshzp.bkt.clouddn.com/' + res.key,
              remarks: that.remarks
            }
            that.submitForm(data)
          }
        })
      } else {
        let data = {
          id: this.id,
          name: this.name,
          phone: this.phone,
          username: this.username,
          remarks: this.remarks
        }
        this.submitForm(data)
      }
    },
    close () {
      C.closeBrowserWindow()
    },
    async changeImg (file, fileList) {
      // console.log(file)
      const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        C.error('上传头像图片格式错误!')
        return
      }
      if (!isLt2M) {
        C.error('上传头像图片大小不能超过 2MB!')
        return
      }
      this.file = file
      this.headimg = file.url
    },
    async submitForm (data) {
      let res = await C.ajax('/shop/admin/edit', data, 'post')
      if (res) {
        C.success(res.data.info)
      }
    }
  },
  mounted: async function () {
    let row = await C.ajax('/shop/index/getadmininfo', {}, 'post')
    if (row && row.ainfo.id) {
      this.id = row.ainfo.id
      this.name = row.ainfo.name
      this.phone = row.ainfo.phone
      this.username = row.ainfo.username
      this.headimg = row.ainfo.headimg
      this.remarks = row.ainfo.remarks
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>